<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>小喵鱼鱼答题器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            color: #555;
        }

        div {
            width: 100%;
            margin: 30px auto;
        }

        input {
            display: block;
            margin: 0 auto;
            padding: 0 10px;
            width: 500px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }

        ul {
            width: 524px;
            margin: 0 auto;
        }

        li {
            list-style: none;
            display: none;
            border: 1px solid grey;
            font-size: 22px;
        }
        @media screen and (max-width: 680px){
            div {
                margin: 20px auto;
            }

            input {
                width: 60%;
                height: 24px;
                line-height: 24px;
                font-size: 18px;
                margin-bottom:3px;
            }
            ul {
                width: 66%;
            }
            li {
                border: 1px solid grey;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
<div>
    <input type="text">
    <ul>
        <li>以下哪种鱼是最敏感刁钻、不易上钩的？ 鲶鱼</li>
        <li>被誉为“水中之参”的是什么水产品？ 泥鳅</li>
        <li>俗称“大头鱼”的是以下哪种鱼？ 鳙鱼</li>
        <li>水位上涨的情况下，哪种区域比较容易钓到鱼？ 浅滩</li>
        <li>“对虾”这个名字的由来是？ 古时每两只算一对来计数和出售</li>
        <li>哪种鱼会发出明显的“咯咯”、“呜呜”的声音？ 大黄鱼</li>
        <li>通过观察判断鱼量多少，以下哪个地方鱼多？ 清浑相间小河</li>
        <li>什么鱼在收到威胁时，会膨胀成球状，皮肤竖起小刺保护自己？ 河豚</li>
        <li>哪种鱼离开水可存活时间更长？ 泥鳅</li>
        <li>以下哪种水产品的生存史最长？ 海胆</li>
        <li>夏天以下哪种情况下最适合垂钓？ 雷阵雨后</li>
        <li>夏天气候炎热、阳光直射的时候，以下哪种地点较难钓到鱼？ 岸边浅滩</li>
        <li>四大家鱼之中，哪一种生长速度最快？ 青鱼</li>
        <li>俗称“鲩鱼”的是以下哪种鱼？ 草鱼</li>
        <li>冬天在以下哪个地方最容易钓到鱼？ 深水区</li>
        <li>“燕鱼”是哪种鱼的别称？ 神仙鱼</li>
        <li>在唐代，哪一种水产品被禁止养殖、捕捞和销售？ 鲤鱼</li>
        <li>以下关于鱼胆的描述，哪项是正确的？ 有毒不宜食用</li>
        <li>以下哪种鱼不喜欢结群，饥饿时有自相残杀现象？ 蜂巢石斑鱼</li>
        <li>不少人会先将虾背上黑色的“虾线”去除掉再吃，这条虾线实际上是什么？ 虾的肠</li>
        <li>以下哪种鱼不在四大家鱼之列？ 鲤鱼</li>
        <li>冬天一天的以下哪个时间段中比较容易钓到鱼？ 中午</li>
        <li>小丑鱼脸上一般有什么颜色的斑纹？ 白色</li>
        <li>某种鱼的鱼群雌性统领死后，其雄性配偶会转变为新的雌性统领。这种鱼是？ 小丑鱼</li>
        <li>一年四季中哪个季节更容易钓到大鱼？ 秋天</li>
        <li>为什么不少鱼背部比较黑，肚子比较白？ 保护色，进化选择结果</li>
        <li>观察水质、水色、水流、水花、水草等情况，可以判断出该处鱼量的多少。以下哪个地方的鱼最多？ 清浑相间的小河</li>
        <li>“夏天到，鱼难钓”。夏天以下哪个时间是最不适垂钓的？ 中午</li>
        <li>青鱼最喜欢吃以下哪种食物？ 螺蛳</li>
        <li>一年四季中，哪个季节是钓鱼的淡季? 冬季</li>
        <li>大鱼上钩后，如果收竿方法不对，特别容易溜走。以下哪种收竿方式比较适当？ 迂回周旋、拉放结合</li>
        <li>以下哪种鱼被称为池塘的“清道夫”？ 鲮鱼</li>
        <li>“头长长钩嘴，蹼大身乌黑。飞潜叼鱼归，不是盗鱼贼。”请问描述的是什么动物？ 鱼鹰</li>
        <li>以下哪种鱼遇到威胁时身体会形成渐变色来隐藏自己？ 黄尾蓝魔鱼</li>
        <li>湖北秭归的江边每逢桃花盛开时节，水中会出现大量的桃花鱼。当地人把桃花鱼当做吉祥物，与屈原、王昭君一起作为屈乡人的骄傲。那么桃花鱼实际上是？ 水母</li>
    </ul>
</div>
</body>
<script>
    var inp=document.getElementsByTagName('input')[0];
    var lis=document.getElementsByTagName('li');
    inp.addEventListener('keyup',function (e) {
        var val=e.target.value;
        Array.from(lis).forEach(function (item) {
            if(val.length==0){
                return false;
            }
            if(item.innerHTML.includes(val)){
                console.log(1);
                item.style.display='block';
            }else {
                item.style.display='none';
            }
        })
    })
</script>
</html>